.#{$namespace}-menu {
  --#{$namespace}-menu-bg-color: transparent;

  border-right-width: 0;
  border-bottom-width: 0;
  // 竖向菜单
  &.#{$namespace}-menu--vertical {
    .#{$namespace}-sub-menu {
      .#{$namespace}-menu-item {
        min-width: 54px;
        // color: var(--maia-menu-text-color);
        height: 36px;

        &::before {
          position: absolute;
          top: 0;
          left: 25px;
          width: 1px;
          height: 100%;
          content: '';
          background-color: #eaedf6;
        }
      }
    }

    .#{$namespace}-menu-item,
    .#{$namespace}-sub-menu__title {
      height: 42px;
      color: var(--maia-menu-text-color);
    }

    .#{$namespace}-menu-item:hover,
    .#{$namespace}-sub-menu__title:hover {
      @include background-active;
    }

    .#{$namespace}-menu-item {
      &.is-active {
        font-weight: var(--#{$namespace}-font-weight-primary);
        color: var(--maia-menu-active-text-color);

        @include background-active;

        &::after {
          @include vertical-common-active;
        }
      }
    }

    .#{$namespace}-sub-menu {
      .#{$namespace}-menu-item {
        &.is-active {
          font-weight: var(--#{$namespace}-font-weight-primary);
          color: var(--maia-menu-active-text-color);

          @include background-active;

          &::after {
            @include vertical-common-active;

            top: 6px;
            left: 24px;
            height: 24px;
          }
        }
      }

      &:not(.is-opened) {
        &.is-active {
          .#{$namespace}-sub-menu__title {
            font-weight: var(--#{$namespace}-font-weight-primary);
            color: var(--maia-menu-active-text-color);

            @include background-active;

            &::before {
              @include vertical-common-active;
            }
          }
        }
      }
    }
  }

  &.#{$namespace}-menu--collapse {
    .#{$namespace}-menu-item,
    .#{$namespace}-sub-menu__title {
      height: 56px;
      color: var(--maia-menu-text-color);
    }
    .#{$namespace}-sub-menu {
      &.is-active {
        .#{$namespace}-sub-menu__title {
          @include background-active;

          &::before {
            @include vertical-common-active;
          }
        }
      }
    }
  }

  // 横向菜单
  &.#{$namespace}-menu--horizontal {
    .#{$namespace}-sub-menu {
      .#{$namespace}-menu-item {
        min-width: 54px;
        height: 36px;
        padding: 0 16px 0 38px !important;
        line-height: 36px;
        color: var(--maia-menu-text-color);
      }
    }

    .#{$namespace}-menu-item,
    .#{$namespace}-sub-menu__title {
      height: 40px;
      line-height: 40px;
      color: var(--maia-menu-text-color);
    }

    .#{$namespace}-menu-item:hover,
    .#{$namespace}-sub-menu__title:hover {
      --#{$namespace}-menu-hover-bg-color: transparent;
    }
    .#{$namespace}-menu-item:not(.is-disabled):focus,
    .#{$namespace}-sub-menu__title:not(.is-disabled):focus {
      --#{$namespace}-menu-hover-bg-color: transparent;
    }

    .#{$namespace}-menu-item {
      &.is-active {
        font-weight: var(--#{$namespace}-font-weight-primary);
        color: var(--maia-menu-active-text-color);

        &::before {
          @include horizontal-common-active;
        }
      }
    }

    .#{$namespace}-sub-menu {
      .#{$namespace}-sub-menu__title {
        padding-right: 32px !important;
        .#{$namespace}-sub-menu__icon-arrow {
          right: 16px;
        }
      }

      &:not(.is-opened) {
        &.is-active {
          font-weight: var(--#{$namespace}-font-weight-primary);
          color: var(--maia-menu-active-text-color);
          .#{$namespace}-sub-menu__title {
            color: var(--maia-menu-active-text-color);

            &::before {
              @include horizontal-common-active;
            }
          }
        }
      }
    }
  }
}

// 菜单组件，折叠起来时popup弹出框样式控制
.#{$namespace}-menu--popup {
  background-color: #fff;
  border-radius: 2px;
  .#{$namespace}-menu-item,
  .#{$namespace}-sub-menu__title {
    height: 36px;
    color: #111 !important;

    .slot__custom-title-wrap {
      height: 36px;

      .slot__custom-title-icon {
        display: none;
      }

      .slot__custom-title-txt {
        height: 36px;
        line-height: 36px !important;
        text-align: left !important;
      }
    }

    &.is-active {
      color: #007af5 !important;
    }
  }
}
